<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>{{year}}年{{month}}月临安区公共机构公务用车油耗情况统计表</h2>
    </div>
    <div class="unitInfo-tableInfo">
      <div class="unitInfo-infoRow">
        <label>填报单位：</label>
        <span>{{carDetail.DepartmentName}}</span>
        <span style="color:red">({{carDetail.State=='0'?'未审':'已审'}})</span>
      </div>
      <div class="unitInfo-infoRow">
        <label>制表：</label>
        <span>{{carDetail.OfficeAddress}}</span>
      </div>
    </div>
    <div class="unitInfo-tableContent">
      <table width="100%" border="1" cellpadding="10">
        <tr>
          <td align="center" valign="middle" width="160px;">能源种类</td>
          <td align="center" valign="middle" width="200px;">单位</td>
          <td align="center" valign="middle">数量</td>
          <td align="center" valign="middle">备注</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">电</td>
          <td>耗电量(千瓦时)</td>
          <td align="center" valign="middle">{{carDetail.Electricity.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.Electricity.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle">{{carDetail.Electricity.Amount}}</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">水</td>
          <td>用水量(吨)</td>
          <td align="center" valign="middle">{{carDetail.Water.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.Water.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle">{{carDetail.Water.Amount}}</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">汽油</td>
          <td>用量(升)</td>
          <td align="center" valign="middle">{{carDetail.Gasoline.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.Gasoline.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"> {{carDetail.Gasoline.Amount}}</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">柴油</td>
          <td>用量(升)</td>
          <td align="center" valign="middle">{{carDetail.Diesel.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.Diesel.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle">{{carDetail.Diesel.Amount}}</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">燃气</td>
          <td>用量(立方米)</td>
          <td align="center" valign="middle">{{carDetail.Gas.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.Gas.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle">{{carDetail.Gas.Amount}}</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">燃煤</td>
          <td>用量(吨)</td>
          <td align="center" valign="middle"> {{carDetail.Coal.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.Coal.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"> {{carDetail.Coal.Amount}}</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">充电桩</td>
          <td>数量(个)</td>
          <td align="center" valign="middle">{{carDetail.ChargingPile.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.ChargingPile.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle">{{carDetail.ChargingPile.Amount}}</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">可再生能源</td>
          <td>用量</td>
          <td align="center" valign="middle">{{carDetail.Renewable.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.Renewable.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle">{{carDetail.Renewable.Amount}}</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">其他能源消耗</td>
          <td>用量</td>
          <td align="center" valign="middle">{{carDetail.Other.Total}}</td>
          <td align="center" valign="middle" rowspan='2'>
            {{carDetail.Other.Remark}}
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle">{{carDetail.Other.Amount}}</td>
        </tr>
        <tr>
          <td align="center" valign="middle">审核意见</td>
          <td valign="middle" colspan='3'>
            <el-input type="textarea" :rows="2" v-model="carDetail.CheckRemark">
            </el-input>
          </td>
        </tr>
        <tr>
          <td align="center" valign="middle">审核操作</td>
          <td valign="middle" colspan='3'>
            <el-radio-group v-model="carDetail.State">
              <el-radio :label="1">已审</el-radio>
              <el-radio :label="0">未审</el-radio>
            </el-radio-group>
          </td>
        </tr>
      </table>
      <div class="table-footers">
        <div class="tableFooter-row">
          <div class="tableFooter-col">
            <span>单位负责人：</span>
            <span>{{carDetail.Creator.Boss}}</span>
          </div>
          <div class="tableFooter-col" style="padding-left:15px;">
            <span>联系电话：</span>
            <span>{{carDetail.Creator.Telephone }}&nbsp;&nbsp;{{carDetail.Creator.Mobile}}</span>
          </div>
          <div class="tableFooter-col">
          </div>
        </div>
        <div class="tableFooter-row">
          <div class="tableFooter-col">
            <span>填 &nbsp;&nbsp;表 &nbsp;&nbsp;&nbsp;人：</span>
            <span>{{carDetail.Creator.LoginName}}</span>
          </div>
          <div class="tableFooter-col" style="padding-left:15px;">
            <span>传真：</span>
            <span>{{carDetail.Creator.Fax}}</span>
          </div>
          <div class="tableFooter-col" style="text-align:right;">
            <span>填报日期：</span>
            <span>{{carDetail.CreatedAt}}</span>
          </div>
        </div>
      </div>
      <div class="table-button">
        <el-button type="primary" size="mini" @click="submitEnergy">保存</el-button>
        <el-button type="info" size="mini" @click="$router.push('/indexEnergy')">关闭</el-button>
        <el-button size="mini" @click="print()">打印</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: '',
      month: '',
      departName: '',
      carDetail: {
        Electricity: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Water: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Gasoline: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Diesel: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Gas: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Coal: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        ChargingPile: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Renewable: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Other: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Creator: {
          Boss: '',
          Telephone: '',
          Mobile: '',
          LoginName: '',
          Fax: '',
        },
        State: 0,
        CheckRemark: '',
      }
    }
  },
  methods: {
    async getDetail() {
      const result = await this.$get('/api/InstituionEnergy', { departmentName: this.departName, year: this.year, month: this.month })
      console.log(result)
      this.carDetail = result
    },
    print(){
       if (window.print != null) {
        window.print();
      }
      else {
        this.$message({
          message: '您没有安装打印机，请安装后继续！',
          type: 'error'
        })
      }
    },
    async submitEnergy() {
      try {
        const resutl = await this.$post('/api/InstituionEnergy/check/' + this.carDetail.Id, {
          State: this.carDetail.State,
          Remark: this.carDetail.CheckRemark
        })
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getDetail();
      }
      catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  created() {
    this.showHome.isShow = false;
    this.year = this.$route.params.year
    this.month = this.$route.params.month
    this.departName = this.$route.params.department
    this.getDetail()
  }
}
</script>
<style lang="scss" scoped>
.unitInfo-tableContainer {
  width: 100%;
  padding: 20px 15px;
}

.unitInfo-tableTitle {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
  h2 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  span {
    font-size: 16px;
    font-weight: bold;
  }
}

.unitInfo-tableInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
  color: #606266;
}

.unitInfo-tableContent {
  width: 100%;
  table {
    color: #606266;
    border: 1px solid #ebeef5;
    td {
      padding: 8px 10px;
    }
  }
}

.table-footers {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  .tableFooter-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 25px;
    .tableFooter-col {
      flex: 1;
    }
  }
}

.table-button {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>


